<template>
	<div>
		<div class="yr">
			<YRCardTitle  :title="queryParams.params.kw?'搜索：'+ queryParams.params.kw:'温其如玉'"></YRCardTitle>
			<div class="poetry-list">
				<div v-for="(arr, index) in articleList" :key="index" >
					<div class="row" style="">
						<div class="col" v-for="(item, i) in arr" :key="i" >
							<div class="data" @click="toDetail(item)">
								<div class="img" :style="{ backgroundImage: 'url(' + item.cover + ')' }"></div>
								<div class="img-cover">
									<h1 class="title"><span v-html="item.title"/></h1>
									<div class="content">
										<p class="poetry-desc"><span v-html="item.description"/></p>
										<div class="tags">
											<time class="bot">{{ item.createTime | dateformatDate }}</time>
											<span class="bot">{{ item.author }}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- 清除浮动 -->
						<div style="clear: both;"></div>
						<div class="banlf"></div>
					</div>
				</div>
				<Spin size="large" fix v-if="spinShow"></Spin>
			</div>
		</div>
		<div class="page">
			<Page :total="total" v-if="queryParams.params.kw" :current="poetryPageCurrent" :page-size="queryParams.size" @on-change="searchArticle" />
			<Page :total="total" v-else :current="poetryPageCurrent" :page-size="queryParams.size" @on-change="pageArticle" />
		</div>
	</div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
import YRCardTitle from '@/components/common/YRCardTitle.vue';
import { pageArticle, addArticleReadNum } from '@/api/article';
import { searhPageArticle } from '@/api/search';
export default {
	name: 'PoetryList',
	components: {
		YRCardTitle
	},
	props: {
		title: String
	},
	data: () => {
		return {
			total: 0,
			queryParams: {
				current: 1,
				size: 9,
				params: {
					kw:undefined,
					type: 3
				}
			},
			articleList: [],
			showContent: false,
			spinShow: false //加载中
		};
	},
	computed: {
		...mapGetters({
			poetryPageCurrent: 'base/poetryPageCurrent'
		})
	},
	methods: {
		...mapMutations({
			setPoetryPageCurrent: 'base/setPoetryPageCurrent'
		}),
		initArticle(current){
			if(this.$route.query.kw){
				this.queryParams.params.kw = this.$route.query.kw;
				this.searchArticle();
			}else{
				this.queryParams.params.kw = undefined;
				this.pageArticle(current);
			}
		},
		searchArticle(){
			this.spinShow = true;
			searhPageArticle(this.queryParams).then(res => {
				//平滑滚动到顶部
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
				this.articleList = this.arrSplit(res.data.records, 3);
				this.total = res.data.total;
				this.spinShow = false;
			});
		},
		pageArticle(current) {
			this.setPoetryPageCurrent(current || 1)
			this.queryParams.current = this.poetryPageCurrent;
			this.spinShow = true;
			pageArticle(this.queryParams).then(res => {
				//平滑滚动到顶部
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
				this.articleList = this.arrSplit(res.data.records, 3);
				this.total = res.data.total;
				this.spinShow = false;
			});
		},
		toDetail(item) {
			addArticleReadNum(item.id);
			this.$router.push({ path: '/poetry/poetryContent/', query: { id: item.id } });
		},
		//拆二维数组
		arrSplit(arr, len) {
			//获取要切割的数组的长度
			var length = arr.length;
			//如果长度小于要划分的长度，返回原数组
			if (len <= 1 || length < len) return [arr];
			var groups = [];
			//拆分成的二维数组的个数
			var number = Math.ceil(length / len);
			//用slice方法，每四个截取一次
			for (var i = 0; i < number; i++) groups.push(arr.slice(len * i, len * (i + 1)));
			return groups;
		}
	},
	created() {
		this.initArticle(this.poetryPageCurrent);
	},
	watch: {
		$route() {
			// 对路由变化作出响应...
			// 解决相同组件间跳转 组件被复用 周期函数失效
			this.initArticle(1);
		}
	}
};
</script>

<style scoped="scoped" lang="stylus">
.ivu-row
	padding-bottom 30px
.yr
	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)
	border-radius 10px
.poetry-list
	padding 20px
	padding-bottom 0px
	background #fff
	border-radius 0 0 10px 10px
	position relative
	min-height 65vh
	.data:hover .title
		transform translateY(-30px) scale(1.2)
		opacity 1
	.data:hover .content
		display block !important
	.data:hover .img
		transform scale(1.2)
		filter blur(3px)
	.row
		position relative
		padding-bottom 32px
		.col
			width 33.3%
			float left
			.data
				overflow hidden
				width 160px
				height 200px
				position relative
				box-shadow 0 0 1px 1px rgba(0, 0, 0, 0.1), 2px 0 2px rgba(0, 0, 0, 0.17)
				border-radius 5px
				margin 0 auto
				transition all 0.2s
				cursor pointer
				.img
					background url('http://lang.sliver.fun/dbblog/20190831/2de3bf940b2d45f4a0259b0554aaa3b5.jpg') // lang.sliver.fun/dbblog/20190831/2de3bf940b2d45f4a0259b0554aaa3b5.jpg)
					background-size cover
					background-position center
					background-repeat no-repeat
					width 100%
					height 100%
					transition all 0.2s
				.img-cover
					position absolute
					width 100%
					height 100%
					top 0px
					left 0px
					z-index 99
					background-color rgba(0, 0, 0, 0.08)
					color #fff !important
					-webkit-transition all 0.3s
					transition all 0.3s
					.title
						text-align center
						text-shadow 0 0 3px #fff
						color #fff
						font-family inherit
						font-weight 500
						white-space nowrap
						font-size 18px
						padding-top 75px
						transition all 0.2s
					.content
						position absolute
						bottom 0px
						width 100%
						padding 5px 5px 0px
						display none
						text-shadow 0 0 3px #fff
						transition all 0.9s
						.poetry-desc
							padding-bottom 2px
							width 100%
							text-align left
							text-overflow ellipsis
							display -webkit-box
							-webkit-line-clamp 2
							-webkit-box-orient vertical
							overflow hidden
						.tags
							display flex
							justify-content space-between
		.banlf
			position absolute
			left -30px
			bottom 20px
			width calc(100% + 60px)
			height 8px
			background #fafafa
			border 1px solid #ededed
			border-bottom 1px solid #cdcdcd
			z-index 5
.page
	width 100%
	text-align center
	padding-top 15px
</style>
